<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <div class="header">购物车</div>
      <div class="main">
        <div class="item" v-for="(item,index) in list" :key="index">
          <input type="checkbox" : value="item.checked" @click="checkBtn(index)">
          <img src="../build/logo.png" />
          <div>
            <p>{{item.name}}</p>
            <p style="color: red;">{{item.price}}</p>
          </div>
          <div class="number">
            <button @click="min(index)">-</button>
            <input type="number" style="width: 40px;">
            <button @click="add(index)>+</button>
          </div>
        </div>
      </div>
      <div class="footer">
        <input type="checkbox" checked @click="checkall" />全选
        <p style="margin-left: 20px;">总数量</p>
        <p style="margin-left: 20px;">总价:60</p>
      </div>
    </div>
  </body>
  <script src="../CLASS1/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          checked: false,
          imgSrc: '',
          name: '瓜子',
          price: '1'
        }, {
          checked: false,
          imgSrc: '',
          name: '花生',
          price: '1'
        }, {
          checked: false,
          imgSrc: '',
          name: '西瓜子',
          price: '1'
        }],
        allNum: 0,
        allprice: 0
      },
      methods: {
        checkBtn(index) {
          this.list[index].check = !this.list[index].check;
          this.changeAllNum();
          this.changeAllPrice();
          this.changeAllCheck();
        },
        min(index) {
          this.list[index].number--;
          this.changeAllNum();
          this.changeAllPrice();
        },
        add(index) {
          this.list[index].number++;
          this.changeAllNum();
          this.changeAllPrice();
        },
        checkAll(e) {
          if (e.target.checked == true) {
            for (var i = 0; i < this.list.length; i++) {
              this.list[i].check = false
            } else {
              for (var i = 0; i < this.list.length; i++) {
                this.list[i].check = true
              }
            }
            this.changeAllNum();
            this.changeAllPrice();
          }

        }
        this.changeAllNum();
      },
      changeAllNum() {
        var num = 0;
        console.log(this.list, 1)
        for (var i = 0; i < this.list.length; i++) {
          console.log(this.list, 1)
          if (this.list[i].checked == true) {
            console.log(this.list[i])
            num += parentInt(this.list[i].number)
          }
        }
        this.allNum = num;
      }
    }
    })
  </script>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    .header {
      height: 60px;
      line-height: 60px;
      color: white;
      background-color: rgb(255, 80, 0);
      text-align: center;
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: 100vw;
      height: 60px;
      background-color: rgb(255, 80, 0);
    }

    .main {}

    .main .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 20px;
      border: 1px solid black;
      border-radius: 10px;
      box-sizing: border-box;
    }

    .main .item img {
      width: 80px;
      height: 80px;
      margin: 0 20px;
    }

    .main .item .number {
      display: flex;
      margin-left: 20px;
    }
  </style>
</html>
